import * as T from './types';
import actions from './actions';
import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {Image, ScrollView, Text, View, Picker} from '@tarojs/components';
import {AtList, AtListItem} from 'taro-ui';
import 'taro-ui/dist/style/components/list.scss';
import {store2Props} from './selectors';
// import { WMkit } from 'wmkit';
import './index.less';
import nodata from '@/assets/image/prizesRecord/noData.png';
import right from '@/assets/image/prizesRecord/right.png';
import addBtn from '@/assets/image/prizesRecord/addBtn.png';
import icon from '@/assets/image/prizesRecord/icon.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      yearAndMonth: '筛选',
      refresherTriggered: false,
    };
  }

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  onYearAndMonthChange(e) {
    console.log('eeeeeee===========', e);
    this.setState(
      {
        yearAndMonth: e.detail.value,
      },
      () => {
        let newStr = e.detail.value.replace('-', ',');
        console.log('newStr===', newStr);
        this.props.actions.action.commonChange('main.yearMonth', newStr);
        this.props.actions.action.getMyReward();
      },
    );
  }

  _onRefresherRefresh = () => {
    let {refresherTriggered} = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    // this.props.actions.action.commonChange('main.myRewardList', []);
    this.props.actions.action.commonChange('main.pageNum', 0);
    this.props.actions.action.getMyReward();
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
    console.log('刷新====');
  };

  handleLoadMore = async () => {
    let {
      main: {pageNum, totalPages},
    } = this.props;
    if (pageNum + 1 == totalPages) return;
    let num = pageNum + 1;
    await this.props.actions.action.commonChange('main.pageNum', num);
    await this.props.actions.action.getMyReward();
  };
  render() {
    // let itemStr = Taro.getStorageSync('b2b-wechat@login');
    let {refresherTriggered} = this.state;
    let {
      main: {myRewardList},
    } = this.props;
    return (
      <View className="packageCprizesRecord">
        <View className="recordList-box-search">
          <View className="recordList-box-search-item">
            <Picker
              fields="month"
              mode="date"
              value={this.state.yearAndMonth}
              onChange={this.onYearAndMonthChange.bind(this)}
            >
              <AtList>
                <AtListItem extraText={this.state.yearAndMonth} />
              </AtList>
            </Picker>
            <Image className="recordList-box-search-item-right" src={right} mode="widthFix" />
          </View>
        </View>
        {myRewardList.length <= 0 ? (
          <View className="nodataBox">
            <Image className="nodata" src={nodata} mode="widthFix" />
            <Text className="nodataTip">啊哦，暂无数据~</Text>
          </View>
        ) : (
          <View className="recordList-box">
            <ScrollView
              className="scroll-props-box"
              scrollY
              refresherEnabled
              refresherTriggered={refresherTriggered}
              // onRefresherPulling={this._onRefresherRefresh.bind(this)}
              // onScrollToLower={this.handleLoadMore.bind(this)}
              // lowerThreshold={50}

              onScrollToLower={this.handleLoadMore}
              onRefresherPulling={this._onRefresherRefresh}
            >
              <View className="recordList-box-list">
                {myRewardList &&
                  myRewardList.map((item, index) => {
                    return (
                      <View className="recordList-box-list-item">
                        {/* <View> */}
                        <Image className="recordList-box-list-item-img" src={icon} mode="widthFix" />
                        {/* </View> */}
                        <View className="recordList-box-list-item-info">
                          <Text className="recordList-box-list-item-con">奖品内容：{item.prizeName}</Text>
                          <Text className="recordList-box-list-item-time">中奖时间：{item.rewardTime}</Text>
                          <Text className="recordList-box-list-item-type">
                            奖励类型：{item.prizeType == 0 ? '抽奖' : item.prizeType == 1 ? '签到' : '任务'}
                          </Text>
                        </View>
                        {/* goodsType:0:实物 1：虚拟 */}
                        {!item.whetherOrder && (
                          //whetherOrder: 0，待领取（未下单）  1，已领取（已下单）
                          <View className="recordList-box-list-item-addBtnBox">
                            <Text
                              className="inputGiftPackAddress"
                              onClick={() => {
                                this.props.actions.action.toOrderDetali(item.goodsInfoId, item);
                              }}
                            >
                              去领取
                            </Text>
                            {/* <Image
                              className="recordList-box-list-item-addBtn"
                              src={addBtn}
                              mode="widthFix"
                              onClick={() => {
                                console.log('item===', item);
                                this.props.actions.action.toOrderDetali(item.goodsInfoId, item);
                              }}
                              // onClick={() => {
                              //   Taro.navigateTo({
                              //     url: '/pages/package-D/address/index',
                              //   });
                              // }}
                            /> */}
                          </View>
                        )}
                      </View>
                    );
                  })}
              </View>
            </ScrollView>
          </View>
        )}
      </View>
    );
  }
}
